<template>
  <div>

    <el-form :inline="true" :model="districtVo" class="demo-form-inline">
      <el-form-item label="名字">
        <el-input v-model="districtVo.name" placeholder="名字" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="districtList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="arr" style="width: 100%">

    <el-table-column
      label="序号"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.districeId }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="行政区划"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="行政区划代码"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.districeCode }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="上级行政区划名称"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.administrativeName }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row.districeId)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.districeId)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="districtVo.pageNum"
      :page-sizes="[3, 5, 9, 12]"
      :page-size="districtVo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>

  <el-dialog title="信息" :visible.sync="dialogFormVisible">
    <el-form  :model="district">
      <el-form-item label="行政区名称" :label-width="formLabelWidth" >
        <el-input v-model="district.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="行政区划代码" :label-width="formLabelWidth">
        <el-input v-model="district.districeCode" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上級行政区名称" :label-width="formLabelWidth">
        <el-select v-model="district.typeId" placeholder="请选择" clearable>
          <el-option
            v-for="item in option"
            :key="item.typeId"
            :label="item.name"
            :value="item.typeId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="doSubmit()">确 定</el-button>
    </div>
  </el-dialog>

  </div>
</template>


<script>

import {add, dictionaryList, districtList, edit, findAllocationById, remove} from '@/api/monitor/Allocation'

export default {
  name: "index",
  data() {
    return {
      arr:[],
      districtVo:{
        pageNum:1,
        pageSize:3,
      },
      district:{
        districeId:'',
        administrativeName:'',
        name:'',
        districeCode:'',
        typeId:'',
      },
      total:0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      //回显
      option:[],
    }
  },
  methods: {
    handleSizeChange(val) {
      this.districtVo.pageSize=val;
      this.districtList();
    },
    handleCurrentChange(val) {
      this.districtVo.pageNum=val;
      this.districtList();
    },
    districtList(){
      districtList(this.districtVo).then(
        res=>{
          this.arr=res.data.list
          this.total=res.data.total
        }
      )
    },
    dictionaryList(){
      dictionaryList().then(
        res=>{
          this.option=res.data
        }
      )
    },
    //回显
    handleEdit(districeId) {
      this.dialogFormVisible=true;
      findAllocationById(districeId).then(
        res=>{
          this.district = res.data
        }
      )
    },
    doSubmit(){
      if (this.district.districeId!=0){
        edit(this.district).then(
          res=>{
            this.$message.success(res.msg||"修改成功");
            this.dialogFormVisible=false;
            this.districtList();
          }
        )
      }else{
        add(this.district).then(
        res=>{
          this.$message.success(res.msg||"添加成功");
          this.dialogFormVisible=false;
          this.districtList();
          //清空数据
          this.district={
            districeId:'',
            name:'',
            districeCode:'',
            typeId:'',
          }
        }
      )}
    },


    handleDelete(districeId) {
      remove(districeId).then(
        res=>{
          this.$message.success(res.msg||"删除成功");
          this.districtList();
      })
    },
  },
  created() {
    this.districtList();
    // this.FindById();
    this.dictionaryList();
  }
}
</script>


<style scoped lang="scss">

</style>
